<template>
  <div>
    <div class='header'>
      <div class='cityPosi' @click="go">{{cityName}}
        <i class='iconfont icon-xiala'></i>
      </div>
      <films-swiper :key='imgList.length'>
        <films-swiper-item v-for='data in imgList' :key='data.bannerId' class='filmSwiperItemImg'>
            <img :src="data.imgUrl" @click='handleFilm(data.actionData)'>
        </films-swiper-item>
      </films-swiper>
    </div>

    <film-nav class='sticky'></film-nav>
    <router-view></router-view>
  </div>
</template>
<script>
import filmsSwiper from '@/components/films/FilmsSwiper'
import filmsSwiperItem from '@/components/films/FilmsSwiperItem'
import filmNav from '@/components/films/FilmeNav'
import http from '@/util/http'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      imgList: []
    }
  },
  computed: {
    ...mapState(['cityId', 'cityName'])
  },
  methods: {
    go () {
      this.$router.push('/city')
    },
    handleFilm (filmId) {
      this.$router.push(`/detail/${JSON.parse(filmId).businessId}`)
    }
  },
  mounted () {
    http({
      url: `/gateway?type=2&cityId=${this.cityId}&k=3434640`,
      headers: {
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      this.imgList = res.data.data
    })
  },
  components: {
    filmsSwiper,
    filmsSwiperItem,
    filmNav
  }
}
</script>
<style lang='scss' scoped>
.header{
  position: relative;
  .cityPosi{
    position: absolute;
    left: 10px;
    top: 10px;
    padding:2px 10px;
    border-radius:20px;
    background: rgba(0, 0, 0, 0.449);
    z-index: 99;
    color:white;
    font-size: 13px;
    display: flex;
    i{
      font-size: 11px;
      margin-top:4px;
    }
  }
}

.filmSwiperItemImg{
    img{
        width: 100%;
    }
}
.sticky{
  position: sticky;
  top:0;
  z-index: 10;
  background: white;
}
</style>
